<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="elForm" size="small" :inline="true" style="margin-top: 10px;"
            label-width="68px">
            <el-form-item label="型号ID" prop="id">
                <el-input v-model="queryParams.id" placeholder="请输入型号ID" show-word-limit clearable
                    :style="{ width: '100%' }"></el-input>
            </el-form-item>
            <el-form-item label="型号编码" prop="model">
                <el-input v-model="queryParams.model" placeholder="请输入型号编码" show-word-limit clearable
                    :style="{ width: '100%' }"></el-input>
            </el-form-item>
            <el-form-item label="型号名称" prop="name">
                <el-input v-model="queryParams.name" placeholder="请输入型号名称" show-word-limit clearable
                    :style="{ width: '100%' }"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" style="margin-left: 10px;" icon="el-icon-search" size="mini"
                    @click="submitSearchForm">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetForm">重置</el-button>
                <el-button icon="el-icon-plus" plain type="primary" size="mini" @click="addDevModelOpt()">新增</el-button>
            </el-form-item>
        </el-form>
        <el-row>
            <el-table :data="devModelList" style="width: 100%">
                <el-table-column prop="id" label="id" align="center">
                </el-table-column>
                <el-table-column prop="model" label="型号编码" align="center">
                </el-table-column>
                <el-table-column prop="name" label="型号名称" align="center">
                </el-table-column>
                <el-table-column prop="type" label="类型" align="center">
                </el-table-column>
                <!-- <el-table-column prop="status" label="状态" align="center">
                    <template slot-scope="scope">
                        <el-tag type="info" v-if="scope.row.status == 0">未上线</el-tag>
                        <el-tag type="success" v-else-if="scope.row.status == 1">已上线</el-tag>
                        <el-tag type="info" v-else-if="scope.row.status == 2">舍弃</el-tag>
                        <span v-else></span>
                    </template>
</el-table-column> -->
                <el-table-column prop="tagImageWidth" label="标签图片宽度" align="center">
                </el-table-column>
                <el-table-column prop="tagImageHeight" label="标签图片高度" align="center">
                </el-table-column>
                <el-table-column prop="addTime" label="添加时间" width="160" align="center">
                    <!-- dateFormat -->
                    <template slot-scope="scope">
                        <span>{{ scope.row.addTime <= 0 ? 0 : dateFormat(scope.row.addTime) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" align="center">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="150" align="center">

                </el-table-column>
                <el-table-column fixed="right" label="操作" width="250" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-edit"
                            @click="editDevModelInfoOpt(scope.row)">修改</el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete"
                            @click="delDevModelInfoOpt(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row style="margin-bottom: 20px;">
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getDdevModelList" />
        </el-row>
        <el-dialog title="编辑" width="30%" :visible.sync="editDialog">
            <el-form label-width="100px">
                <el-form-item label="型号编码">
                    <el-input type="text" v-model="editForm.model" @change="$forceUpdate()"></el-input>
                </el-form-item>
                <el-form-item label="型号名称">
                    <el-input type="text" v-model="editForm.name" @change="$forceUpdate()"></el-input>
                </el-form-item>
                <!-- <el-form-item label="状态">
                    <el-select v-model="editForm.status" placeholder="请选择型号状态" clearable :style="{ width: '100%' }">
                        <el-option label="未上线" value="0"></el-option>
                        <el-option label="已上线" value="1"></el-option>
                        <el-option label="舍弃" value="2"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="标签图片宽度">
                    <el-input type="text" v-model="editForm.tagImageWidth" @change="$forceUpdate()"></el-input>
                </el-form-item>
                <el-form-item label="标签图片高度">
                    <el-input type="text" v-model="editForm.tagImageHeight" @change="$forceUpdate()"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="text" v-model="editForm.remark" @change="$forceUpdate()"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="editDialog = false">取消</el-button>
                <el-button @click="editDevModelInfo()">提交</el-button>
            </div>
        </el-dialog>
        <el-dialog title="新增" width="30%" :visible.sync="addDialog">
            <el-form ref="addForm" label-width="100px">
                <el-form-item label="型号编码">
                    <el-input type="text" v-model="addForm.model" @change="$forceUpdate()"></el-input>
                </el-form-item>
                <el-form-item label="型号名称">
                    <el-input type="text" v-model="addForm.name" @change="$forceUpdate()"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                    <el-input type="text" v-model="addForm.type" @change="$forceUpdate()"></el-input>
                </el-form-item>
                <el-form-item label="设备类型">
                    <el-select v-model="addForm.devType">
                        <el-option v-for="item in devModelTypeList" :key="item.id" :value="item.devType"
                            :label="item.devTypeName" placeholder="请选择"></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="状态">
                    <el-select v-model="addForm.status" placeholder="请选择型号状态" clearable :style="{ width: '100%' }">
                        <el-option label="未上线" value="0"></el-option>
                        <el-option label="已上线" value="1"></el-option>
                        <el-option label="舍弃" value="2"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="标签图片宽度">
                    <el-input type="text" v-model="addForm.tagImageWidth" @change="$forceUpdate()"></el-input>
                </el-form-item>
                <el-form-item label="标签图片高度">
                    <el-input type="text" v-model="addForm.tagImageHeight" @change="$forceUpdate()"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="text" v-model="addForm.remark" @change="$forceUpdate()"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="addDialog = false">取消</el-button>
                <el-button @click="addDevModel()">提交</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getDdevModelList, editDevModelInfo, delDevModelInfo, getDevModelType, addDevModel } from "@/api/alm/dev-base-info/dev-type/dev-type";
import { getType } from "@/api/devTypeMap";

export default {
    data() {
        return {
            // 总条数
            total: 0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                ipaddr: undefined,
                userName: undefined,
                status: undefined,
                model: '',
                status: '',
                name: '',
            },
            dateRange: [],
            devModelList: [],
            editForm: {
                id: '',
                model: '',
                name: '',
                remark: '',
                status: '',
                tagImageWidth: '',
                tagImageHeight: '',
            },
            addForm: {
                model: '',
                name: '',
                type: '',
                devType: '',
                status: '',
                tagImageWidth: '',
                tagImageHeight: '',
                remark: '',
            },
            editDialog: false,
            addDialog: false,
            devModelTypeList: [],
        }
    },
    created() {
        this.getDdevModelList();
        this.getDevModelType();
    },
    deactivated() {
    },
    mounted() {
    },
    methods: {
        getDdevModelList() {
            getDdevModelList(this.addDateRange(this.queryParams, this.dateRange)).then(res => {
                this.devModelList = res.rows;
                this.total = res.total;
            })
        },

        submitSearchForm() {
            // 提交
            this.getDdevModelList()
        },

        resetForm() {
            // 重置

            this.$refs['elForm'].resetFields()
            this.dateRange = [];
            this.queryParams.pageNum = 1;
            this.getDdevModelList()
        },

        editDevModelInfoOpt(row) {
            this.editForm.id = row.id;
            this.editForm.model = row.model;
            this.editForm.name = row.name;
            this.editForm.status = row.status.toString();
            this.editForm.tagImageWidth = row.tagImageWidth;
            this.editForm.tagImageHeight = row.tagImageHeight;
            this.editForm.remark = row.remark;
            this.editDialog = true;
        },

        editDevModelInfo() {
            editDevModelInfo(this.editForm).then(res => {
                console.log('resssss ', res);
                if (res.data > 0) {
                    this.$message.success('编辑成功');
                    this.editDialog = false;
                    this.getDdevModelList();
                } else {
                    this.$message.error('编辑失败');
                }
            })
        },

        delDevModelInfoOpt(row) {
            this.$confirm('是否确认删除?', '提示', {}).then(() => {
                delDevModelInfo(row.id).then(res => {
                    if (res.data > 0) {
                        this.$message.success('删除成功');
                        this.getDdevModelList();
                    } else {
                        this.$message.error('删除失败');
                    }
                })
                console.log('opt ');
            }).catch(() => { })
        },

        addDevModelOpt() {
            this.addDialog = true;
        },

        addDevModel() {
            console.log('addForm ', this.addForm);
            addDevModel(this.addForm).then(res => {
                if (res.data > 0) {
                    this.$message.success('新增成功');
                    this.addDialog = false;
                    this.$refs['addForm'].resetFields()
                    this.getDdevModelList();
                } else {
                    this.$message.error('新增失败');
                }
            })
        },

        getDevModelType() {
            getDevModelType().then(res => {
                this.devModelTypeList = res.data;
            })
        },

        dateFormat(timeStamp) {
            // 创建一个新的Date对象，将时间戳作为参数传递给构造函数
            const date = new Date(timeStamp * 1000)
            // 获取年、月、日、小时和分钟
            const year = date.getFullYear()
            const month = String(date.getMonth() + 1).padStart(2, '0')
            const day = String(date.getDate()).padStart(2, '0')
            const hours = String(date.getHours()).padStart(2, '0')
            const minutes = String(date.getMinutes()).padStart(2, '0')
            const seconds = String(date.getSeconds()).padStart(2, '0')
            // 重新赋值格式化后的日期字符串
            return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`
        },
    }
};
</script>

<style scoped>
.main {
    width: 100%;
}
</style>